{extend name="common/base"/}
{block name="style"}
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=b32b75e11b6769096d4222213f95de96"></script>
<script type="text/javascript" src="__STATIC__/plugs/echarts.js"></script>
<link rel="stylesheet" href="__CSS__/index/index.css">
<link rel="stylesheet" href="__CSS__/index/tool-bar.css">
{/block}
{block name="body"}
<div class="index-body park-body">
	<div class="container" style="width:100%;height:100%;position:relative"> 
        <!-- 地图 -->
		<div id="allmap" class="map" data-url="{:url('index/ajax.map/aerialPhotoLayers')}" data-center="{:config('basic.map_center')}" data-scope="{$scope}">
       	<!-- 地图控制菜单 -->
			<nav class="map-layer-menu">
			  <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
			  <label class="menu-open-button" for="menu-open">
			    <span class="hamburger hamburger-1"></span>
			    <span class="hamburger hamburger-2"></span>
			    <span class="hamburger hamburger-3"></span>
			  </label>
			  <div class="menu-item"> 
			  	<label id="exit">
			  		<i class="fa fa-sign-out"></i>
			  	</label> 
			  </div>
			  <div class="menu-item"> 
			  	<label id="reset">
			  		<i class="fa fa-undo"></i>
			  	</label> 
			  </div>
			  <div class="menu-item">
			  	<input type="checkbox" name="camera_video" id="camera-video" checked>
			  	<label for="camera-video">
			  		<i class="fa fa-video-camera"></i>
			  	</label> 
			  </div>
			  <div class="menu-item">
			  	<input type="checkbox" name="danger_source" id="danger-source" checked>
			  	<label for="danger-source">
			  		<i class="fa fa-warning"></i>
			  	</label>
			  </div>
			</nav>
			<!-- filters -->
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			    <defs>
			      <filter id="shadowed-goo">
			          
			          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
			          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -9" result="goo" />
			          <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
			          <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
			          <feOffset in="shadow" dx="1" dy="1" result="shadow" />
			          <feBlend in2="shadow" in="goo" result="goo" />
			          <feBlend in2="goo" in="SourceGraphic" result="mix" />
			      </filter>
			      <filter id="goo">
			          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
			          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
			          <feBlend in2="goo" in="SourceGraphic" result="mix" />
			      </filter>
			    </defs>
			</svg>
        </div>
        <!-- 地图上的表单 -->
        <div class="matter" id="matter" style="min-width: 1280px;">
        	<div class="bottom-slide">
        		<i class="fa fa-chevron-down"></i>
        	</div>
            <!-- 审核事项 -->
            <div class="tabbox approve">
                <div class="tabtitle"><img src="__IMG__/tab.png">审核事项</div>
                <div class = "maintab">
	                <table>
		                <thead>
		                	 <tr>
		                        <th>审核内容</th>
		                        <th>时间</th>
		                        <th>操作</th>
		                    </tr>
		                </thead>
		                <tbody id="approveView">
		                </tbody>
	                </table>
                </div>
                <div class="tabfoot">
                    <ul class="tabstate">
                        <li>
                        	<a class="approve-status" data-status="*">全部
                            <span class="whitespan">{$auditItemNum.all}</span>
                            </a>
                        </li>
                        <li>
                            <a class="approve-status" data-status="0">未处理
                            <span class="bluespan">{$auditItemNum.unaudited}</span>
                            </a>
                        </li>
                        <li>
                            <a class="approve-status" data-status="1">审核中
                            <span class="yellowspan">{$auditItemNum.under_review}</span>
                            </a>
                        </li>
                        <li>
                            <a class="approve-status" data-status="4">已忽略
                            <span class="grayspan">{$auditItemNum.ignore}</span>
                            </a>
                        </li>
                        <li>
                            <a class="approve-status" data-status="2">已审核
                            <span class="greenspan">{$auditItemNum.success}</span>
                            </a>
                        </li>
                         <li>
                            <a class="approve-status" data-status="3">拒绝
                            <span class="redspan">{$auditItemNum.deny}</span>
                            </a>
                        </li>
                    </ul>
                    <div id="approve-menu1"></div>
                   <!--  <ul class="tabpage">
                        <li><a>上一页</a></li>
                        <li><a>下一页</a></li>
                        <li><a>首页</a></li>
                    </ul> -->
                </div>
            </div>
            <!-- 报警信息 -->
            <div class="tabbox alarm">
                <div class="tabtitle"><img src="__IMG__/tab.png">报警信息</div>
                <div class = "maintab">
	                <table>
		                <thead>
		                	<tr>
		                        <th>报警内容</th>
		                        <th>时间</th>
		                        <th>操作</th>
		                    </tr>
		                </thead>
		                <tbody id="alarmView">
		                </tbody>
	                </table>
                </div>
                 <div class="tabfoot">
                    <ul class="tabstate">
                        <li>
                            <a class="alarm-status" data-status="*">全部
                            <span class="whitespan">{$alarmNum.all}</span>
                            </a>
                        </li>
                        <li>
                            <a class="alarm-status" data-status="0">未读
                            <span class="redspan">{$alarmNum.unread}</span>
                            </a>
                        </li>
                        <li>
                            <a class="alarm-status" data-status="1">待处理
                            <span class="yellowspan">{$alarmNum.pending}</span>
                            </a>
                        </li>
                        <li>
                            <a class="alarm-status" data-status="2">忽略
                            <span class="grayspan">{$alarmNum.ignore}</span>
                            </a>
                        </li>
                        <li>
                            <a class="alarm-status" data-status="3">已处理
                            <span class="greenspan">{$alarmNum.handled}</span>
                            </a>
                        </li>
                    </ul>
                    <div id="alarm-menu1"></div>
                   <!--  <ul class="tabpage">
                        <li><a>上一页</a></li>
                        <li><a>下一页</a></li>
                        <li><a>首页</a></li>
                    </ul> -->
                </div>
            </div>
        </div>
        <!-- 统计信息 -->
     	 <div class="right-side-tab">
        	 <div class="tab-box">
                <div class="tab-title">
                	<div class="tab this" data-target="material">统计信息</div>
                	<div class="right-slide"><i class="fa  fa-chevron-right"></i></div>
                </div>
                <div class="tab-content">
                	<div class="tab-item tab-show" id="material">
                		<div id="early_warning_radar" style="width:100%;height:50%;" data-url="{:url('warning/ajax.present/getAvgRadarData')}">
						</div>
						<div id="early_warning_pie" style="width:100%;height:50%;" data-url="{:url('warning/ajax.present/getDegreePieData')}">
						</div>  
                	</div>
                </div>
              </div>
          </div>
	</div>
</div>
<div class="sensor-view" id="sensorView"></div>
<script>
    function tabWidth(){
        var a=$(window).width();
        var b=a - 200 ;
        $("#matter").css("width",b+"px");
    }
    $(document).ready(function(){
        tabWidth();
    });
    $(window).resize(function(){
        tabWidth();
    });
</script>
<script type="text/html" id="sensorDemo">
		<ul>
		{{# if (d.length > 0 ){ }}
        	{{# for(var i = 0;i < d.length; i++){ }}
				{{# if(d[i].status){ }}
               		<li class="normal">{{d[i].title}}</li>
				{{# }else{ }}
				 	<li class="abnormal">{{d[i].title}}</li>
				{{# } }}
        	{{# } }}
		{{# }else{ }}
			<li>还未关联传感器</li>
		{{# } }}
		</ul>
</script>
<script type="text/html" id="sensorDetail">
	<div class="sensor-detail">
		{{# if(d.status == 1){ }}
		<div class="sensor-info normal">
			<p class="title">{{d.title}}</p>
			<p class="dangersource">({{d.dangersource.name}})---[{{{{d.dangersource.enterprise.shortname}}}}]</p>
		</div>
		{{# } }}
		{{# if(d.status == 0){ }}
		<div class="sensor-info abnormal">
			<p class="title">{{d.title}}</p>
			<p class="dangersource">({{d.dangersource.name}})---[{{d.dangersource.enterprise.shortname}}]</p>
		</div>
		{{# } }}
		<div class="sensor-contact">
			<div class="phone">
				<div class="icon">
					<i class="fa fa-phone-square"></i>
				</div>
				<div class="number">
					<p>{{d.dangersource.staff.tel}}</p>
					<p>{{d.dangersource.staff.mobile}}</p>
				</div>
			</div>
			<div class="contact">
				<p>{{d.dangersource.staff.staffName}}</p>
			</div>
		</div>
		{{# if(d.status == 0){ }}
			<div class="layui-btn handle-btn" data-alarm="{{d.alarm}}"><i class="fa fa-bell-slash"></i></div>
		{{# } }}
	</div>
</script>
<script id="approveTable" type="text/html">
        {{# for(var i = 0;i < d.data.length;i++){ }}
            
            {{# if(d.data[i].status == 0){ }}
                <tr class="blue">
            {{# } }}
            {{# if(d.data[i].status == 1){ }}
                <tr class="yellow">
            {{# } }}
			{{# if(d.data[i].status == 2){ }}
				<tr class="green">
			{{# } }}
			{{# if(d.data[i].status == 3){ }}
				<tr class="red">
			{{# } }}
            {{# if(d.data[i].status == 4){ }}
                <tr class="gray">
            {{# } }}
                <td width="50%">
                    <p>
					{{# if(d.data[i].business != null) { }}
						{{# if(d.data[i].business.enterprise != null ){ }}
							[{{d.data[i].wfType}}] <{{d.data[i].business.enterprise.shortname}}> {{d.data[i].title}}
						{{# }else if(d.data[i].business.unit != null){ }}
							 [{{d.data[i].wfType}}] <{{d.data[i].business.unit.shortName}}> {{d.data[i].title}}
						{{# }else{ }}
							 [{{d.data[i].wfType}}] <管委会> {{d.data[i].title}}
						{{# } }}
						{{# } }}
                    </p>
                    </td>
                <td width="30%">{{d.data[i].create_time}}</td>
                <td>
                    
                    {{# if(d.data[i].status == 0){ }}
						{{# if(d.scope){ }}
						<p class="badge-audit-state pending-approval"></p>
						{{# }else{ }}
                        <p><a href="#" class="ignore-btn event-ignore" data-id="{{d.data[i].id}}">忽略</a>丨<a href="#" class="pend-btn event-pend" data-id="{{d.data[i].id}}">审核</a></p>
						{{# } }}
                    {{# } }}
  					{{# if(d.data[i].status == 1){ }}   
                        <p class="badge-audit-state under-review"></p>
                    {{# } }}
					{{# if(d.data[i].status ==2 ){ }}
						<p class="badge-audit-state check-success"></p>
					{{# } }}
					{{# if(d.data[i].status == 3){ }}
						 <p class="badge-audit-state check-deny"></p>
					{{# } }}
                    {{# if(d.data[i].status == 4){ }}
                       <p class="badge-audit-state check-ignore"></p>
                    {{# } }}
                </td>
            </tr>
        {{# } }}
</script>
<script type="text/html" id="alarmTable">
		{{# for(var i = 0; i < d.length;i++) { }}
			  
            {{# if(d[i].status == 0){ }}
                <tr class="red">
            {{# } }}
            {{# if(d[i].status == 1){ }}
                <tr class="yellow">
            {{# } }}
            {{# if(d[i].status == 2){ }}
                <tr class="gray">
            {{# } }}
            {{# if(d[i].status == 3){ }}
                <tr class="green">
            {{# } }}
					<td width="50%"> <p class="alarm-title" data-id="{{d[i].id}}" data-sensor="{{d[i].sensorId}}">[{{d[i].danger_source.enterprise.shortname}}]<{{d[i].danger_source.name}}> {{d[i].title}}</p></td>
					<td width="30%">{{d[i].startTime}}</td>
					<td>
						 {{# if(d[i].status == 0){ }}
                        	<span class="ignore-btn alarm-ignore" data-id="{{d[i].id}}">忽略</span>丨<span class="pend-btn alarm-pend" data-id="{{d[i].id}}">待处理</span>
                   		 {{# } }}
                    	{{# if(d[i].status == 1){ }}
                        	<span class="ignore-btn alarm-ignore" data-id="{{d[i].id}}">忽略</span>丨<span class="pend-btn alarm-proc" data-id="{{d[i].id}}">处理</span>
                   		 {{# } }}
                    	{{# if(d[i].status == 2){ }}
                        	<p>已忽略</p>
                    	{{# } }}
                   		 {{# if(d[i].status == 3){ }}
                       		 <p class="alarm-cancled">处理成功</p>
                    	{{# } }}
					</td>
				</tr>
		{{# } }}
</script>
  
{/block}
{block name="script"}

<script type="text/javascript" src="__JS__/index/map.js"></script> 
<script type="text/javascript" src="__JS__/index/index.js"></script> 

{/block}